<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 10:36:59
 * @FilePath     : \vue3.2.31-case\响应式基础\声明 & 访问响应式对象\shallowRef\App.vue
-->
<script setup lang="ts">
import { shallowRef, triggerRef } from 'vue'

/**
 * 声明基础类型
 */ 

//理解为
// const shallowRefNum = {
//   value: 1
// }
const shallowRefNum = shallowRef(1);  //对结果没影响
console.log('shallowRefNum', shallowRefNum.value)   //js中也需.value访问，模板中无需.value

/**
 * 声明引用类型
 */

// 理解为
// const shallowRefObj = {
//   value: {
//     a: "a"
//     b: {
//        c: "c",
//     }
//   }
// };
const shallowRefObj = shallowRef({
  a: "a",
  b: {
      c: "c",
  },
});

console.log('shallowRefObj', shallowRefObj)

const change1 = () => {
  shallowRefNum.value = 2
}

const change2 = () => {
  //整体赋值才能更新
  shallowRefObj.value = {
    a: "a-new",
    b: {
        c: "c-new",
    },
  }
}

//只到.value，.value后面的属性重新赋值，视图无法更新
const change3 = () => {
  shallowRefObj.value.a = "1"
  shallowRefObj.value.b.c = "1"
  console.log(shallowRefObj.value.a, shallowRefObj.value.b.c)  // 1   1   值改变了，但视图没更新
  // triggerRef(shallowRefObj) //强制触发由shallowRef声明的浅层ref
  // console.log(shallowRefObj.value.a, shallowRefObj.value.b.c) //1 1   值改变了，视图更新了
}
</script>

<template>
  <h3>shallowRef</h3>
  <h5>
    作用：创建浅层响应式对象，仅在顶层具有响应性，深层属性不会被代理，不具有响应性，对基本类型数据，无影响，常用来做性能优化
  </h5>
  <h5>
    注意：<br>
    1、顶层在js中需.value，模板中无需.value，内层属性无需.value <br>
    2、声明基础属性，无影响；声明引用类型属性，只在顶层具有响应性(数据变， 视图更新)，深层无响应性，响应性只到.value(用.value整体赋值,js中值变，并重新渲染dom，视图更新)，.value后面的属性重新单独赋值，视图无法更新(js中值变，但不渲染dom)，可在单独赋值后，triggerRef()对整个对象强制更新，触发视图更新 <br>
    3、const shallowRefNum = shallowRef(1)  相当于  const shallowRefNum = {value: 1}；<br>
     const shallowRefObj = shallowRef({a: "a", b: {c: "c"}});  相当于  const shallowRefObj = {value: {a: "a", b: {c: "c"}}}; <br>
    4、Ref与Reactive创建的都是递归响应的，将每一层的json 数据解析成一个proxy对象，shallowRef 与shallowReactive创建的是非递归的响应对象 <br>
  </h5>
  <h5>声明基本类型：</h5>
  <ul>
    <li>shallowRefNum：{{ shallowRefNum }}</li>
  </ul>

  <h5>声明引用类型：</h5>
  <ul>
    <li>shallowRefObj.value：{{ shallowRefObj }}</li>
    <li>shallowRefObj.value.a：{{ shallowRefObj.a }}</li>
    <li>shallowRefObj.value.b：{{ shallowRefObj.b }}</li>
    <li>shallowRefObj.value.b.c：{{ shallowRefObj.b.c }}</li>
  </ul>
  <button @click="change1">改变基本类型：shallowRefNum</button>
  <button @click="change2">改变引用类型1：shallowRefNum</button>
  <button @click="change3">改变引用类型2：shallowRefNum</button>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
